import {PageContainer} from "@ant-design/pro-layout";
import React from 'react';
import { Button, Tooltip, Dropdown, Menu, Input } from 'antd';
import { EllipsisOutlined, QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import ProCard from "@ant-design/pro-card";
import {getCapital} from "@/services/ant-design-pro/FinancialOperation";

const Funding = () => {

	const columns = [
		{
			title: '用户ID',
			dataIndex: 'user_id',
			alain:'center',
		},
		{
			title: '昵称',
			dataIndex: 'nickname',
			render: (_) => <a>{_}</a>,
			// 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
			filterDropdown: () => (
				<div style={{ padding: 8 }}>
					<Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
				</div>
			),
			filterIcon: (filtered) => (
				<SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
			),
		},
		{
			title: '创建者',
			dataIndex: 'creator',
			valueEnum: {
				all: { text: '全部' },
				付小小: { text: '付小小' },
				曲丽丽: { text: '曲丽丽' },
				林东东: { text: '林东东' },
				陈帅帅: { text: '陈帅帅' },
				兼某某: { text: '兼某某' },
			},
		},
		{
			title: '状态',
			dataIndex: 'status',
			initialValue: 'all',
			filters: true,
			onFilter: true,
			valueEnum: {
				all: { text: '全部', status: 'Default' },
				close: { text: '关闭', status: 'Default' },
				running: { text: '运行中', status: 'Processing' },
				online: { text: '已上线', status: 'Success' },
				error: { text: '异常', status: 'Error' },
			},
		},
		{
			title: (
				<>
					创建时间
					<Tooltip placement="top" title="这是一段描述">
						<QuestionCircleOutlined style={{ marginLeft: 4 }} />
					</Tooltip>
				</>
			),
			width: 140,
			key: 'since',
			dataIndex: 'createdAt',
			valueType: 'date',
			sorter: (a, b) => a.createdAt - b.createdAt,
		},
		{
			title: '备注',
			dataIndex: 'memo',
			ellipsis: true,
			copyable: true,
		},
		{
			title: '操作',
			width: 180,
			key: 'option',
			valueType: 'option',
			render: () => [
				<a key="link">链路</a>,
				<a key="link2">报警</a>,
				<a key="link3">监控</a>,
			],
		},
	];
  return (
    <PageContainer
		header={{title: '资金记录', breadcrumb: {},}}
	>
		<ProCard>
			<ProTable
				columns={columns}
				request={async (params={}, sorter, filter) => {
					// 表单搜索项会从 params 传入，传递给后端接口。
					let {data} = await getCapital({...params,...sorter,...filter})
					return {
						data,
						success: true,
					};
				}}
				rowKey="key"
				pagination={{
					showQuickJumper: true,
				}}
				search={{
					layout: 'vertical',
					defaultCollapsed: false,
				}}
				dateFormatter="string"
				toolbar={{
					title: '高级表格',
					tooltip: '这是一个标题提示',
				}}
				toolBarRender={() => [
					<Button key="danger" danger>
						危险按钮
					</Button>,
					<Button key="show">查看日志</Button>,
					<Button type="primary" key="primary">
						创建应用
					</Button>,
				]}
			/>
		</ProCard>
    </PageContainer>
  );
};

export default Funding;
